<template>
  <div class="table-box table-content">
    <ProTable
      ref="proTable"
      :columns="columns"
      :request-api="getProcessInstanceList"
      :init-param="initParam"
      :request-auto="true"
      :data-callback="dataCallback"
      :search-col="{ xs: 1, sm: 1, md: 1, lg: 1, xl: 1 }"
    >
      <template #operation="scope">
        <el-button type="primary" :icon="Select" @click="checkProcess(scope)">跟踪</el-button>
      </template>
    </ProTable>
    <el-dialog v-model="dialogVisible" title="流程跟踪" width="80%">
      <div v-html="processData"></div>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup name="processInstance_process">
import { ref, onMounted } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { Select } from "@element-plus/icons-vue";
import { getProcessInstanceList, getProcessInstance } from "@/api/modules/processManagement";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { useRoute } from "vue-router";
const router = useRoute();
const processId = ref("");
const dialogVisible = ref(false);
const processData = ref("");
onMounted(() => {
  const queryProcessId = router.query.processId;
  processId.value = Array.isArray(queryProcessId) ? queryProcessId[0] || "" : String(queryProcessId);
});
const proTable = ref<ProTableInstance>();
const columns = ref<ColumnProps[]>([
  {
    label: "ID",
    prop: "id"
    // width: 240
  },
  {
    label: "流程ID",
    prop: "processDefinitionId"
    // width: 240
  },
  {
    label: "状态",
    prop: "state"
    // width: 240
  },
  { prop: "operation", label: "操作" }
]);

const dataCallback = (data: any) => {
  return {
    list: data.data,
    total: data.totalSize,
    pageNum: data.page,
    pageSize: data.rows
  };
};
const initParam = ref({
  page: 1,
  size: 10,
  processDefinitionId: processId.value
});
const checkProcess = async scope => {
  dialogVisible.value = true;
  const pid = scope.row.id;
  const data = await getProcessInstance(pid);
  let html = data.toString();
  let vHtml = html.replaceAll("jbpm!getProcessImage.action", "api/jbpm!getProcessImage.action");
  processData.value = vHtml;
};
</script>
